<template>
  <div>
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="(item,index) in list" :key="index">
        <img :src="item" alt>
      </mt-swipe-item>
    </mt-swipe>
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to='/home/newslist'>
          <img src="../../public/images/menu1.png" alt="">
          <div class="mui-media-body">新闻资讯</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to='/home/picture'>
          <img src="../../public/images/menu2.png" alt="">
          <div class="mui-media-body">图片分享</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to='/home/buy'>
          <img src="../../public/images/menu3.png" alt="">
          <div class="mui-media-body">商品购买</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to='/home/message'>
          <img src="../../public/images/menu4.png" alt="">
          <div class="mui-media-body">留言反馈</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to='/home/video'>
          <img src="../../public/images/menu5.png" alt="">
          <div class="mui-media-body">视频专区</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to='/home/callme'>
          <img src="../../public/images/menu6.png" alt="">
          <div class="mui-media-body">联系我们</div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "",
  data() {
    return {
      list: []
    };
  },
  components: {},
  created() {
    this.getBanner();
  },
  mounted() {},
  methods: {
    getBanner() {
      axios
        .get(
          "https://www.easy-mock.com/mock/5cef4d4635893419511b7db6/example/banner"
        )
        .then(
          function(response) {
            if (response.status === 200) {
              this.list = response.data.banner;
             
            }
          }.bind(this)
        )
        .catch(function(error) {
          // handle error
          console.log(error);
        });
    }
  }
};
</script>

<style lang='scss' scoped>
body{
  background: #ffffff;
}
.mint-swipe {
  height: 210px;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

//导航区
.mui-table-view{
  padding-top:10px;
}
.mui-table-view-cell{
  img{
    width: 60px;
    height: 60px;
  }
}
// 九宫格背景色
.mui-grid-view.mui-grid-9{
  background-color: #ffffff;
}
// 边框
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
  border-right: none;
  border-bottom: none;
}
</style>